<template>
  <div class="about">
    <p>{{ count }}</p>
    <p>{{ num }}</p>
  </div>
</template>
<script>
import { ref, reactive, watch, toRefs } from "vue";
export default {
  setup(props) {
    const count = ref(0);
    // watch 的第一个参数 是要监听的数据 第二个参数是监听的回调函数
    const data = reactive({
      num: 0,
      age: 10,
      obj:{
        i: 30
      }
    });
    // watch(count, (newVal, oldVal) => {
    //   console.log(newVal); // 1
    //   console.log(oldVal); // 0
    // });
   
   // 当watch 监听的是一个 reactive 声明的对象时，一般第一个参数传入的也是函数
    // watch(()=>data.age, (newVal, oldVal) => {
    //   console.log(newVal);
    //   console.log(oldVal);
    // });
   

  //  const obj = {
  //    number: 20
  //  }

    watch(()=>data.obj, (newVal, oldVal) => {
      console.log(newVal);
      console.log(oldVal);
    },{
      deep:true
    });
    setTimeout(() => {
      count.value++;
      data.num++;
      data.age++;
      // -> logs 1
      // obj.number++
      data.obj.i++
    }, 1000);
    return {
      count,
      ...toRefs(data),
    };
  },
};
</script>
